import Vue from 'vue'
import VueRouter from 'vue-router'
// 路由懒加载，当路由被访问时才加载对应的组件
const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
// 导入searchPopup组件
const searchPopup = () =>
  import(/* webpackChunkName: "home" */ '@/views/home/searchPopup.vue')
// 导入Topic组件
const Topic = () =>
  import(/* webpackChunkName: "Topic" */ '@/views/Topic/Topic.vue')
// 导入CateGory组件
const CatGory = () =>
  import(/* webpackChunkname: "CatGory" */ '@/views/CateGory/CateGory.vue')
// 导入Cart组件
const Cart = () =>
  import(/* webpackChunkName: "Cart" */ '@/views/Cart/Cart.vue')
// 导入User组件
const User = () =>
  import(/* webpackChunkName: "User" */ '@/views/User/User.vue')

// 解决重复点击路由跳转报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function(location) {
  return originalPush.call(this, location).catch((err) => {
    return err
  })
}

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    meta: {
      isShowTabbar: true
    },
    component: Home,
    // home的子路由,在home页面点击跳转的页面
    children: [
      {
        path: 'searchPopup',
        component: searchPopup
      }
    ]
  },
  {
    path: '/topic',
    meta: {
      isShowTabbar: true
    },
    component: Topic
  },
  {
    path: '/category',
    meta: {
      isShowTabbar: true
    },
    component: CatGory
  },
  {
    path: '/cart',
    meta: {
      isShowTabbar: true
    },
    component: Cart
  },
  {
    path: '/user',
    meta: {
      isShowTabbar: true
    },
    component: User
  },
  {
    path: '/goodsdetail/:id',
    component: () =>
      import(
        /* webpackChunkName: "goodsdetail" */ '@/views/goodsDetail/goodsDetail.vue'
      )
  }
]

const router = new VueRouter({
  routes
})

// 路由前置守卫，路由跳转前对路由进行拦截
// 函数第一个参数是要去的路由的信息，通过第一个参数的path可以拿到将要跳转到的路由
// 函数第二个参数是来自的路由信息，通过第二个参数的path可以拿到来自路由的信息
// 函数第三个参数next是放行的意思，是一个方法，方法括号内可以填写false表示不放行，放路由表示从定向到该路由页面
router.beforeEach((to, from, next) => {
  // 获取token值，判断用户是否有登陆
  const token = window.localStorage.getItem('token')
  // 如果用户没有登录，将要跳转的路由是购物车的路由，进行拦截
  if (to.path === '/cart') {
    // 如果用户有登陆，放行
    if (token) {
      next()
    } else {
      // 否则跳转到用户页面，
      Vue.prototype.$toast.fail('请先登录')
      setTimeout(() => {
        next('/user')
      }, 1000)
    }
  }
  // 因为一旦设置路由前置守卫，所有路由跳转都会被拦截
  // 除了要拦截的路由外都放行，所以要加一个next()放行
  next()
})

export default router
